<!--
 * @Author: FYCDC-Germ ujjldn0515@163.com
 * @Date: 2025-06-01 18:03:48
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-06-26 20:08:07
 * @FilePath: \g-table\g-table\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  
  <gtableOptionsEditor
    v-model:table-options="localTableOptions"
    v-model:table-columns="localTableColumns"
    v-model:table-data="localTableData"
  />
  
  <gtableOptionsEditor
    v-model:table-options="localTableOptions1"
    v-model:table-columns="localTableColumns1"
    v-model:table-data="localTableData1"
  />
<!--
  <gtableColumnsEditor
    v-model:table-columns="localTableColumns"
    v-model:table-data="localTableData"
  />

  <gtable
    v-model:table-options="localTableOptions"
    v-model:table-columns="localTableColumns"
    v-model:table-data="localTableData"
  />
-->
  
</template>

<script setup>
import { ref, onMounted, reactive, nextTick,watch} from 'vue'
import gtable from '@/components/g-table.vue'
import gtableOptionsEditor from '@/components/g-table-options-editor.vue'
import gtableColumnsEditor from '@/components/g-table-columns-editor.vue'

const localTableOptions = reactive({
  dataApi: '', //http://localhost:5173/public/mockData.json
  rowKey: 'name',
  pagination: true,
  showSummary: true,
  summaryColumns: ['salary'],
  selectionType: 'multiple',
  selectedRowKeys: ['用户1','用户3'],
  options: { border: true, stripe: true, pageSizes: undefined },
  treeProps:{ 
    children: 'children', // 子级字段名
    hasChildren: 'hasChildren', // 是否有子级字段名（可选）
    checkStrictly: false, // 是否父子不关联
  },
  tableLayout:'fixed',
  showDefaultAdd: true,
  showAdvancedSearch: true,
  showRefresh: true,
  showColumns:true,
  showExport: true,
  showImport: true,
})

const localTableColumns = ref([
  { 
    columnId:0, 
    prop: 'name', 
    label: '姓名', 
    searchable: true, 
    fieldOptions:{type: 'text'},
    visible:true,
    resizable:true
  },
  { 
    columnId:1, 
    prop: 'gender', 
    label: '性别', 
    searchable: true,     
    fieldOptions:{type: 'select',options:[{label:'男',value:'1'},{label:'女',value:'2'}]},
    visible:false,
    resizable:true 
  },
  { 
    columnId:2, 
    prop: 'birthday', 
    label: '生日', 
    searchable: true, 
    fieldOptions:{type: 'date',format:'YYYY-MM-DD'},
    visible:true,
    resizable:true,
    formatterFn: `if (cellValue) { 
      const [year, month, day] = cellValue.split('-');
      return \`\${year}年\${month}月\${day}日\`;
      } else {
       return cellValue;
    }`
  },
  { 
    columnId:3, 
    prop: 'age', 
    label: '年龄', 
    searchable: true, 
    fieldOptions:{type: 'number'},
    visible:false,
    resizable:true 
  },
  { 
    columnId:4, 
    prop: 'salary', 
    label: '工资', 
    searchable: true, 
    fieldOptions:{type: 'number'},
    visible:true,
    resizable:true
  },  
  { 
    columnId:5, 
    prop: 'action', 
    type: 'action', 
    label: '操作', 
    slot: 'action', 
    width: 180,
    visible:true,
    resizable:true 
  }
])
const localTableData = ref([
  { name: '用户1', gender: '1', birthday: '1990-01-01', age: 25, salary: 5000 },
  { name: '用户2', gender: '2', birthday: '1992-05-15', age: 23, salary: 6000 },
  { name: '用户3', gender: '1', birthday: '1988-11-10', age: 37, salary: 7500 },
  { name: '用户4', gender: '2', birthday: '1995-03-22', age: 30, salary: 7000 }
])

const localTableOptions1 = reactive({
  dataApi: '', //http://localhost:5173/public/mockData.json
  rowKey: 'name',
  pagination: true,
  showSummary: true,
  summaryColumns: ['salary'],
  selectionType: 'multiple',
  selectedRowKeys: ['用户1','用户3'],
  options: { border: true, stripe: true, pageSizes: undefined },
  treeProps:{ 
    children: 'children', // 子级字段名
    hasChildren: 'hasChildren', // 是否有子级字段名（可选）
    checkStrictly: false, // 是否父子不关联
  },
  tableLayout:'fixed',
  showDefaultAdd: true,
  showAdvancedSearch: true,
  showRefresh: true,
  showColumns:true,
  showExport: true,
  showImport: true,
})

const localTableColumns1 = ref([
  { 
    columnId:0, 
    prop: 'name', 
    label: '姓名', 
    searchable: true, 
    fieldOptions:{type: 'text'},
    visible:true,
    resizable:true
  },
  { 
    columnId:1, 
    prop: 'gender', 
    label: '性别', 
    searchable: true,     
    fieldOptions:{type: 'select',options:[{label:'男',value:'1'},{label:'女',value:'2'}]},
    visible:false,
    resizable:true 
  },
  { 
    columnId:2, 
    prop: 'birthday', 
    label: '生日', 
    searchable: true, 
    fieldOptions:{type: 'date',format:'YYYY-MM-DD'},
    visible:true,
    resizable:true,
    formatterFn: `if (cellValue) { 
      const [year, month, day] = cellValue.split('-');
      return \`\${year}年\${month}月\${day}日\`;
      } else {
       return cellValue;
    }`
  },
  { 
    columnId:3, 
    prop: 'age', 
    label: '年龄', 
    searchable: true, 
    fieldOptions:{type: 'number'},
    visible:false,
    resizable:true 
  },
  { 
    columnId:4, 
    prop: 'salary', 
    label: '工资', 
    searchable: true, 
    fieldOptions:{type: 'number'},
    visible:true,
    resizable:true
  },  
  { 
    columnId:5, 
    prop: 'action', 
    type: 'action', 
    label: '操作', 
    slot: 'action', 
    width: 180,
    visible:true,
    resizable:true 
  }
])
const localTableData1 = ref([
  { name: '用户1', gender: '1', birthday: '1990-01-01', age: 25, salary: 5000 },
  { name: '用户2', gender: '2', birthday: '1992-05-15', age: 23, salary: 6000 },
  { name: '用户3', gender: '1', birthday: '1988-11-10', age: 37, salary: 7500 },
  { name: '用户4', gender: '2', birthday: '1995-03-22', age: 30, salary: 7000 }
])


onMounted(() => {

})
/*
watch(
	() => tableColumns,(newVal) => {
    //localTableColumns.value = newVal
		console.log('tableColumns',newVal)
	},{ deep: true, immediate: true }
)
watch(
	() => tableOptions,(newVal) => {
    //localTableOptions.value = newVal
		console.log('tableOptions',newVal)
	},{ deep: true, immediate: true }
)
watch(
	() => tableData,(newVal) => {
    //localTableData.value = newVal
		console.log('tableData',newVal)
	},{ deep: true, immediate: true }
)
*/

</script>
<style scoped>
</style>
